<template>
  <div>
    <swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide>
        <img
          src="https://img2.baidu.com/it/u=2517973031,3800078676&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
          alt=""
          style="width: 100%; height: 100%"
        />
      </swiper-slide>
      <swiper-slide>
        <img
          style="width: 100%; height: 100%"
          src="https://img1.baidu.com/it/u=2041884437,3018996815&fm=253&fmt=auto&app=138&f=JPEG?w=1190&h=500"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          style="width: 100%; height: 100%"
          src="https://img1.baidu.com/it/u=3581765316,873633035&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
          alt=""
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <main-content>
      <template #mainContent>
        <div class="technology" style="padding: 30px 0">
          <h1
            class="animate__animated animate__slideInDown"
            style="
              font-size: 40px;
              line-height: 44px;
              color: rgba(0, 0, 0, 0.85);
              text-align: center;
              font-weight: 600;
            "
          >
            无人机应用
          </h1>
          <div style="text-indent: 3ch">
            <span
              style="
                line-height: 30px;
                font-size: 18px;
                color: rgba(0, 0, 0, 0.65);
              "
              >无人机技术‌是一种利用先进的无人驾驶飞行器技术、遥感传感器技术、遥测遥控技术、通讯技术、GPS差分定位技术和遥感应用技术的集合，实现自动化、智能化、专用化快速获取国土资源、自然环境、地震灾区等空间遥感信息，并完成遥感数据处理、建模和应用分析的应用技术...</span
            >
          </div>
          <div class="technology-show">
            <div
              v-for="(item, index) in lists"
              :key="index"
              class="img-div animate__animated animate__zoomIn"
            >
              <img :src="item.url" style="width: 100%; height: 100%" />
              <span
                style="
                  position: absolute;
                  left: 50%;
                  top: 25%;
                  font-size: 25px;
                  font-weight: bolder;
                  transform: translate(-50%, -50%);
                  color: #fff;
                  text-shadow: rgb(0, 0, 0) 4px -2px 2px;
                "
                >农业领域</span
              >
            </div>
          </div>
        </div>
        <div class="advantage" style="padding: 30px 0">
          <h1
            class="animate__animated animate__slideInDown"
            style="
              font-size: 40px;
              line-height: 44px;
              color: rgba(0, 0, 0, 0.85);
              text-align: center;
              font-weight: 600;
            "
          >
            技术优势
          </h1>
          <div style="text-indent: 3ch; display: flex; justify-content: center">
            <span
              style="
                line-height: 30px;
                font-size: 18px;
                color: rgba(0, 0, 0, 0.65);
              "
            >
              无人机技术的优势主要体现在提高安全性和可靠性、增强灵活性和适应性、提高经济性和效率、扩大应用领域、智能化和自适应性提升...</span
            >
          </div>

          <div class="advantage-show">
            <div
              class="img-divs animate__animated animate__zoomIn"
              v-for="(item, index) in lists2"
              :key="index"
            >
              <img :src="item.url" alt="" style="width: 100%; height: 100%" />
              <span
                style="
                  position: absolute;
                  left: 50%;
                  top: 25%;
                  font-size: 25px;
                  font-weight: bolder;
                  transform: translate(-50%, -50%);
                  color: #fff;
                  text-shadow: rgb(0, 0, 0) 4px -2px 2px;
                "
                >{{ item.title }}</span
              >
            </div>
          </div>
        </div>
      </template>
    </main-content>
  </div>
</template>

<script>
import "animate.css";
import mainContent from "@/components/main/mainContent.vue";
export default {
  components: {
    mainContent,
  },
  data() {
    return {
      swiperOption: {
        // loop: true,
        // autoplay: {
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
        // pagination: {
        //   el: ".swiper-pagination",
        //   type: "fraction",
        //   clickable: true,
        // },
        spaceBetween: 30,
        effect: "fade",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      lists: [
        {
          key: "1",
          url: "https://img1.baidu.com/it/u=1139608030,3483178216&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
        },
        {
          key: "2",
          url: "https://d.ifengimg.com/q100/img1.ugc.ifeng.com/newugc/20201026/11/wemedia/c9e5cadbd096d1438375b8e07f8621b098b9b4db_size393_w1528_h905.jpg",
        },
        {
          key: "3",
          url: "https://img2.baidu.com/it/u=2684291306,2583538021&fm=253&fmt=auto&app=138&f=JPEG?w=664&h=500",
        },
      ],
      lists2: [
        {
          key: "1",
          url: "https://img0.baidu.com/it/u=1503467719,3577441888&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
          title: "安全性",
        },
        {
          key: "2",
          url: "https://img0.baidu.com/it/u=1503467719,3577441888&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
          title: "可靠性",
        },
        {
          key: "3",
          url: "https://img0.baidu.com/it/u=1503467719,3577441888&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
          title: "自适应性",
        },
      ],
    };
  },
  methods: {
    onSwiper() {},
    onSlideChange() {},
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 40vw;
  .swiper-slide {
    background-position: center;
    background-size: cover;

    &.slide-1 {
      background-image: url("/images/example/5.jpg");
    }
    &.slide-2 {
      background-image: url("/images/example/6.jpg");
    }
    &.slide-3 {
      background-image: url("/images/example/7.jpg");
    }
    &.slide-4 {
      background-image: url("/images/example/8.jpg");
    }
    &.slide-5 {
      background-image: url("/images/example/9.jpg");
    }
  }
}

.technology-show,
.advantage-show {
  width: 100%;
  display: flex;
  margin: 30px 0;
  justify-content: center;
}

.img-div,
.img-divs {
  margin: 0 0.5%;
  --animate-duration: 3s;
  width: 30%;
  position: relative;
  cursor: pointer;
}
.img-div:hover,
.img-divs:hover {
  transform: scale(1.05);
}

@media screen and(max-width:400px) {
  .swiper {
    height: 400px !important;
  }
  .technology-show,
  .advantage-show {
    display: block !important;
    overflow: hidden;
  }
  .img-div,
  .img-divs {
    width: 100% !important;
    height: 300px !important;
    margin: 0 0 20px 0;
  }
}
</style>